<template>
  <div class="page group-index">
    <van-sidebar v-model="activeKey" @change="setCate">
      <van-sidebar-item v-for="cate in cates" :key="cate.id" :title="cate.title" />
    </van-sidebar>
    <div class="page-content">
      <van-image v-if="cates[activeKey] && cates[activeKey].image" :src="cates[activeKey].image"></van-image>
      <group-list class="margin-top10" v-if="products && products.length>0" :lists="products" :gutter="5"></group-list>
      <div v-else-if="isLoading" class="empty-box"><van-loading size="24px">加载中...</van-loading></div>
      <div v-else class="empty-box"> 该类目暂无内容 </div>
    </div>
  </div>
</template>
<script >
import utils from "../../utils";

export default {
  data() {
    return {
      cateId:0,
      activeKey: 0,
      isLoading: true,
      cates: [],
      products: []
    };
  },
  mounted() {
    let params = this.$route.query
    if(params && params.id){
      this.cateId = params.id
    }
    this.loadData()
  },
  methods: {
    loadData() {
      this.$api.post("groupbuy/get_cates", { pid: 0 }).then(json => {
        if (json.code == 1) {
          this.cates = utils.fixListImage(json.data, 'icon,image');
          if(this.cateId > 0){
            for(let i=0;i<this.cates.length;i++){
              if(this.cates[i].id == this.cateId){
                this.activeKey = i;
                break;
              }
            }
          }
          this.loadProducts()
        }
      });
    },
    loadProducts() {
      this.$api.post("groupbuy/get_list", { cate: this.cateId }).then(json => {
        this.isLoading=false
        if (json.code == 1) {
          this.products = utils.fixListImage(json.data.lists);
        }
      });
    },
    setCate() {
      this.isLoading=true
      if(this.cates[this.activeKey]){
        this.cateId = this.cates[this.activeKey].id
      }
      this.loadProducts()
    }
  }
};
</script>
<style lang="scss">
.van-sidebar{
  height: calc( 100vh - 50px );
  background: #fafafa;
  position: fixed;
}
.page-content{
  padding-left:85px;
}
</style>